﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagina Prototipo</title>
    <script src="../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        .auto-style1 {
            border-collapse: collapse;
            font-size: 11.0pt;
            font-family: Calibri, sans-serif;
            border: 1.0pt solid #78C0D4;
        }

        .auto-style2 {
            text-align: justify;
            text-indent: -18.0pt;
            line-height: 115%;
            font-size: 11.0pt;
            font-family: Calibri, sans-serif;
            margin-left: 36.0pt;
            margin-right: 0cm;
            margin-top: 0cm;
            margin-bottom: .0001pt;
        }

        .auto-style3 {
            text-align: justify;
            text-indent: -18.0pt;
            line-height: 115%;
            font-size: 11.0pt;
            font-family: Calibri, sans-serif;
            margin-left: 36.0pt;
            margin-right: 0cm;
            margin-top: 0cm;
            margin-bottom: 10.0pt;
        }

        .auto-style4 {
            width: 168.45pt;
        }

        .auto-style5 {
            width: 99.2pt;
        }

        .auto-style6 {
            width: 164.55pt;
        }
    </style>
    <script type="text/javascript">
        function doAction() {
            var initialTime = new Date().getTime();
            $("*").toggleClass("auto-style5");
            var finalTime = new Date().getTime();
            $("#tiempoJs").val((finalTime - initialTime).toString());
        }
    </script>
</head>
<body>
    <input type="button" name="botonClick" value="Click" id="botonClick" onclick="doAction()"/>
    <input type="text" name="tiempoJs" id="tiempoJs" value="" />
    <div style="text-align: center">
        <span style="align-content: center">
            <img style="align-content: center" width="166" height="162" src="../Images/sello poli.png" />
        </span>
        <br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>ESCUELA SUPERIOR POLITÉCNICA DEL CHIMBORAZO</span>
        <br />
        <br />
        <span style='font-family: "Arial","sans-serif"; text-align: center'>FACULTAD DE INFORMATICA Y ELECTRÓNICA </span>
        <br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>ESCUELA DE INGENIERÍA EN SISTEMAS </span>
        <br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>“ANÁLISIS DE RENDIMIENTO Y PRODUCTIVIDAD CROSS-BROWSER HTML DOM DE LOS 
    FRAMEWORKS MOOTOOLS, JQUERY Y YUI CASO PRÁCTICO EVALUACIÓN DE DESTREZAS EN EL ÁREA DE INGLÉS UESTAR” </span>
        <br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>TESIS DE GRADO </span>
        <br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>PREVIA A LA OBTENCION DEL TÍTULO DE:</span><br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>INGENIERO EN SISTEMA INFORMÁTICOS</span><br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>PRESENTADO POR:</span><br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>HILDA MARIA SISALIMA TAPIA</span><br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>ESTHELA NATALY TENELEMA ARIAS</span><br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>RIOBAMBA – ECUADOR</span><br />
        <br />
        <span style='font-family: "Arial","sans-serif"'>2013</span><br />
        <br />
    </div>
    <br />
    <br />
    <br />
    <table style="width: 45%">
        <tr>
            <td>
                <div style="text-align: justify">
                    <span style='font-family: "Arial","sans-serif"'>AGRADECIMIENTO</span><br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>Agradecemos a Dios por su bendición y por la oportunidad que nos ha
                        brindado de continuar con nuestros estudios.</span><br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>A nuestros padres por guiarnos y apoyarnos constantemente.</span><br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>A la Escuela superior politécnica por brindarnos una excelente formación
                        académica.</span><br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>A nuestros docentes en especial a nuestro director y miembro de tesis 
                        que nos han orientado hasta la culminación de nuestra meta.</span><br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>A todas las personas que de una u otra forma hicieron posible el 
                         desarrollo de esta investigación.</span><br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>A nuestra familia y amigos por todo su apoyo incondicional.</span><br />
                </div>
            </td>
        </tr>

    </table>
    <br />
    <br />
    <br />
    <table style="width: 45%">
        <tr>
            <td>
                <div style="text-align: justify">
                    <span style='font-family: "Arial","sans-serif"'>DEDICATORIA</span><br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>A Dios por enseñarnos día a día que con humildad, paciencia y sabiduría todo
                        es posible.
                    </span>
                    <br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>A nuestros padres </span>
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>con mucho cariño por su apoyo, consejos, comprensión, amor, ayuda 
                        en los momentos difíciles y por brindarnos los recursos necesarios para culminar nuestros estudios.</span><br />
                    <br />
                </div>
            </td>
        </tr>
    </table>
    <br />
    <br />
    <br />
    <table style="width: 45%; text-align: justify">
        <tr>
            <td>
                <div>
                    <span style='font-family: "Arial","sans-serif"'>RESPONSABILIDAD DE LAS AUTORAS</span><br />
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>“Nosotros HILDA MARÍA SISALIMA TAPIA y ESTHELA NATALY TENELEMA ARIAS, 
        somos responsables de las ideas, doctrinas y resultados expuestos en esta Tesis de Grado, y el
        patrimonio intelectual de la misma pertenece a la Escuela Superior Politécnica de Chimborazo”</span>
                </div>
            </td>
        </tr>
    </table>
    <br />
    <br />
    <br />

    <span style='font-family: "Arial","sans-serif"'>INDICE GENERAL</span><br />
    <br />
    <p style='font-family: "Arial","sans-serif"'>PORTADA</p>
    <br />
    <p style='font-family: "Arial","sans-serif"'>AGRADECIMIENTO</p>
    <br />
    <p style='font-family: "Arial","sans-serif"'>DEDICATORIA</p>
    <br />
    <p style='font-family: "Arial","sans-serif"'>ABREVIATURAS</p>
    <br />
    <p style='font-family: "Arial","sans-serif"'>INDICE GENERAL</p>
    <br />

    <p style='font-family: "Arial","sans-serif"'>INDICE DE TABLAS</p>
    <br />
    <p style='font-family: "Arial","sans-serif"'>INDICE DE FIGURAS</p>
    <br />
    <p style='font-family: "Arial","sans-serif"'>INTRODUCCIÓN </p>
    <br />
    <span>Contenido </span>
    <p>
        <a href="#_Toc352887364">
            <span>INTRODUCCIÓN</span>
        </a>
    </p>
    <p><a href="#_Toc352887365"><span>CAPITULO I</span></a></p>
    <p><a href="#_Toc352887366"><span>1. MARCO REFERENCIAL</span></a></p>
    <p><a href="#_Toc352887367"><span>1.1 Antecedentes</span></a></p>
    <p><a href="#_Toc352887368"><span>1.2 Justificación</span></a></p>
    <p><a href="#_Toc352887371"><span>1.2.1 Justificación Aplicativa</span></a></p>
    <p><a href="#_Toc352887372"><span>1.3 Objetivos</span></a></p>
    <p><a href="#_Toc352887373"><span>1.3.1 Objetivo General</span></a></p>
    <p><a href="#_Toc352887374"><span>1.3.2 Objetivos Específicos</span></a></p>
    <p><a href="#_Toc352887375"><span>1.4 Planteamiento de la Hipótesis</span></a></p>
    <p><a href="#_Toc352887376"><span>1.4.1 Determinación de variables</span></a></p>
    <p><a href="#_Toc352887377"><span>1.4.2 Operacionalización conceptual</span></a></p>
    <p><a href="#_Toc352887378"><span>1.4.3 Operacionalización metodológica</span></a></p>
    <p><a href="#_Toc352887379"><span>CAPITULO II</span></a></p>
    <p><a href="#_Toc352887380"><span>2. MARCO TEORICO</span></a></p>
    <p><a href="#_Toc352887381"><span>2.1 Introducción a los Frameworks</span></a></p>
    <p><a href="#_Toc352887382"><span>2.2 Conceptualización</span></a></p>
    <p><a href="#_Toc352887383"><span>2.3 Características</span></a></p>
    <p><a href="#_Toc352887384"><span>2.4 Ventajas del uso de frameworks para el desarrollo de aplicaciones web</span></a></p>
    <p><a href="#_Toc352887385"><span>2.5 Cross-browser</span></a></p>
    <p><a href="#_Toc352887386"><span>HTML – DOM</span></a></p>
    <p><a href="#_Toc352887388"><span>Framework Mootools</span></a></p>
    <p><a href="#_Toc352887388"><span>Conceptualización</span></a></p>
    <p><a href="#_Toc352887389"><span>Características</span></a></p>
    <p><a href="#_Toc352887390"><span>Arquitectura</span></a></p>
    <p><a href="#_Toc352887391"><span>Ventajas de Mootools</span></a></p>
    <p><a href="#_Toc352887392"><span>Framework jQuery</span></a></p>
    <p><a href="#_Toc352887393"><span>Conceptualización</span></a></p>
    <p><a href="#_Toc352887394"><span>Características</span></a></p>
    <p><a href="#_Toc352887395"><span>Ventajas de jQuery</span></a></p>
    <p><a href="#_Toc352887396"><span>Framework YUI</span></a></p>
    <p><a href="#_Toc352887397"><span>Conceptualización</span></a></p>
    <p><a href="#_Toc352887398"><span>Características</span></a></p>
    <p><a href="#_Toc352887399"><span>Arquitectura</span></a></p>
    <p><a href="#_Toc352887400"><span>CAPITULO III</span></a></p>
    <p>
        <a href="#_Toc352887401"><span>3. ANÁLISIS DE RENDIMIENTO Y PRODUCTIVIDAD CROSS-BROWER
 HTML DOM DE LOS FRAMEWORKS MOOTOOLS, JQUERY Y YUI</span></a>
    </p>
    <p>
        <a href="#_Toc352887402"><span>Determinación de los parámetros para la comparación
 de rendimiento y productividad</span></a>
    </p>
    <p><a href="#_Toc352887403"><span>CAPITULO IV</span></a></p>
    <p>
        <a href="#_Toc352887404"><span>4 DESARROLLO DE LA APLICACIÓN WEB PARA LA EVALUACIÓN DE
 DESTREZAS EN EL ÁREA DE INGLÉS UESTAR</span></a>
    </p>
    <p><a href="#_Toc352887405"><span>CONCLUSIONES</span></a></p>
    <p><a href="#_Toc352887406"><span>RECOMENDACIONES</span></a></p>
    <p><a href="#_Toc352887407"><span>RESUMEN</span></a></p>
    <p><a href="#_Toc352887408"><span>GLOSARIO DE TÉRMINOS</span></a></p>
    <p><a href="#_Toc352887409"><span>BIBLIOGRAFÍA</span></a></p>
    <p><a href="#_Toc352887410"><span>BIBLIOGRAFÍA DE INTERNET</span></a></p>
    <p><a href="#_Toc352887411"><span>ANEXOS</span></a></p>
    <p>CONCLUSIONES </p>
    <p>RECOMENDACIONES </p>
    <p>RESUMEN </p>
    <p>SUMMARY </p>
    <p>GLOSARIO </p>
    <p>BIBLIOGRAFÍA </p>
    <p>ANEXOS </p>
    <br />
    <br />
    <h1>CAPITULO I</h1>
    <br />
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>En el presente capítulo
se tratará acerca del marco referencial, en el que se encuentran resumidos de forma
general los antecedentes, la justificación del proyecto de tesis, los objetivos
a alcanzar con el desarrollo de la misma y el planteamiento de la hipótesis que
se demostrará.</span>
    </p>
    <p style='text-align: justify'><span>MARCO REFERENCIAL</span></p>
    <br />
    <p>
        <span style='font-family: "Arial","sans-serif"'>En el marco referencial se presentara un enfoque conceptual de los
términos y definiciones a emplearse durante el desarrollo de la presente investigación.</span>
    </p>
    <br />
    <p><span style='font-family: "Arial","sans-serif"'>1.1 Antecedentes</span></p>
    <br />
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>El creciente número de exploradores web, el auge de mejora en la experiencia de usuario, son factores
que en la actualidad conviertan en indispensable el uso de un lenguaje de scripting en el cliente ya que reduce la carga del servidor al delegar la
responsabilidad de varias tareas al software cliente, mejora la experiencia del usuario, facilita la creación de web dinámicas, etc; ECMAScript es el lenguaje
estandarizado de scripting para el cliente el cual tiene diferentes variaciones entre las más comunes JavaScript y JScript.</span>
    </p>
    <br />
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>La diversidad de exploradores cada uno con sus propios motores de ecmascript o javascript
dificulta el desarrollo de páginas web, ante lo cual es indispensable el uso de frameworks que incrementen el rendimiento con los motores del lenguaje de
scripting de los clientes.</span>
    </p>
    <br />
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>JQuery es uno de los frameworks más populares usados para la creación de sitios web dinámicos, el
cual facilita el desarrollo para distintos browsers, automatiza tareas complejas, mejora la interacción con HTML DOM y CSS, brinda un conjunto de
componentes gráficos (Menús, acordeones, calendarios, paletas de colores, galerías, diálogos, pestañas, barras de progreso, autocompletadores, botones y
widgets) que mejora la experiencia de usuario, facilita el uso de AJAX.</span>
    </p>
    <br />
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>MooTools es una nueva alternativa compacta ante jQuery proporcionando una API sencilla, intuitiva y poderosa, efectuando
todas las operaciones que lo hace jQuery. YUI es un framework de Javascript propietario de Yahoo que implementa el paradigma de orientación a prototipos,
actualmente es uno de los frameworks más utilizados ya que proporciona una API sencilla ampliamente documentada.</span>
    </p>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial", "sans-serif"'>El análisis de rendimiento y productividad cross-browser de los frameworks proporcionará un
marco referencial orientado a arquitectos y desarrolladores web para la elección de un framework adecuado de acuerdo a las características del sistema,
el tiempo y el esfuerzo estimado de desarrollo.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>La falta de conocimiento acerca del nivel de inglés con
el que ingresan los estudiantes de diversos planteles educativos al octavo año de educación básica así como también el desconocimiento del nivel de inglés adquirido por los estudiantes
del tercero de bachillerato durante su formación académica en la Unidad Educativa “Santo Tomás Apóstol Riobamba” ha provocado carencia de
homogeneidad en cuanto al nivel de inglés se refiere.</span>
    </p>
    <br />
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>En la actualidad, la lengua inglesa ha tenido mayor
importancia debido a las necesidades que plantea el siglo XXI en la que los estudiantes requieren tener un dominio del mismo, lo que les proporciona
satisfacción profesional al terminar su proceso educativo brindándoles la posibilidad de comunicarse en una segunda lengua, con personas dentro y fuera del país;
proporcionándoles herramientas necesarias para el conocimiento y el desarrollo de las habilidades lingüísticas básicas (Listening, Grammar y Reading).</span>
    </p>
    <br />
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>La creación de una aplicación web evaluativa y retroalimentativa de destrezas en el área de inglés (Listening, Grammar y
Reading) de la Unidad Educativa “Santo Tomás Apóstol Riobamba” servirá de apoyo a los docentes, estudiantes y padres de familia para el seguimiento y mejoramiento
de la calidad educativa y del rendimiento estudiantil.</span>
    </p>
    <br />
    <h2>1.2 Justificación </h2>
    <br />
    <h3>Justificación Teórica</h3>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Los frameworks de
JavaScript proporcionan un conjunto de funciones y propiedades que facilitan el
diseño y construcción de sitios web dinámicos, proporcionando una base
fundamental para el desarrollo ágil de aplicaciones, un estudio que presente
una guía para la elección del framework de JavaScript y su análisis de rendimiento y productividad
facilitaría el proceso de planificación de aplicaciones, además de reducir los
riesgos futuros de desarrollo y mantenimiento.</span>
    </p>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Ante la carencia de un análisis de rendimiento y productividad acerca de los frameworks de JavaScript sobre
              HTML DOM es necesario realizar un estudio para la elección correcta del framework de acuerdo al escenario a aplicarse.</span>
    </p>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>La diversidad de navegadores ha dado como consecuencia un conjunto
de extensiones al lenguaje JavaScript original, por lo cual identificar un framework que aproveche las ventajas que proporcionan los clientes suministrará una
ventaja competitiva al sitio web en desarrollo.</span>
    </p>
    <br />
    <h3><span>Justificación Aplicativa</span></h3>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>La carencia de un sistema que proporcione información estadística relacionada con el nivel de inglés con
el que ingresan los estudiantes de diversos planteles educativos al octavo año de educación básica y el nivel de inglés adquirido por los estudiantes del
tercero de bachillerato durante su formación académica en la Unidad Educativa “Santo Tomás Apóstol Riobamba”, los ha limitado en cierto aspecto en lo que se
refiere a la nivelación y obtención de un nivel aceptable del inglés tanto hablado como escrito y en el mejoramiento de su perfil académico.</span>
    </p>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>A través de la investigación propuesta se desarrollará una aplicación que permita evaluar los
3 frameworks en escenarios específicos de prueba mediante la construcción de prototipos, posteriormente a la realización del análisis se implementará un
sistema web para la evaluación de destrezas en el área de inglés (Listening, Grammar y Reading) de la Unidad Educativa “Santo Tomás Apóstol Riobamba”
contribuyendo de esta manera al mejoramiento del nivel de inglés de los estudiantes de el establecimiento educativo mediante la retroalimentación y evaluación de destrezas adquiridas.</span>
    </p>
    <br />
    <h2>1.3 Objetivos</h2>
    <br />
    <h3>1.3.1 Objetivo General</h3>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Realizar un análisis de rendimiento y productividad cross-browser HTML DOM de los frameworks MooTools,
jQuery y YUI para el desarrollo de un sistema web para la evaluación de destrezas en el área de inglés UESTAR”</span>
    </p>
    <br />
    <br />
    <h3>1.3.2 Objetivos Específicos</h3>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Realizar el estudio de las características de rendimiento y productividad cross-browser
HTML DOM de los frameworks MooTools,jQuery y YUI.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Determinar
los parámetros para el análisis de rendimiento y productividad cross-browser HTML DOM de los frameworks MooTools,
jQuery y YUI.</span>
    </p>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Construir prototipos para la evaluación del rendimiento y productividad cross-browser HTML DOM sin considerar la
aplicación AJAX de los frameworks en los navegadores Internet Explorer 9.0, 10.0, Mozilla Firefox 22.0 y Google Chrome 27.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Definir una guía marco para la elección de frameworks en base al resultado del estudio.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Desarrollar una aplicación web utilizando el framework de mejor rendimiento y productividad
para la retroalimentación y evaluación de destrezas en el área de inglés (Listening, Grammar y Reading) de la Unidad Educativa “Santo Tomás Apóstol Riobamba”</span>
    </p>
    <br />
    <br />
    <h2>1.4 Planteamiento de la Hipótesis</h2>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>La comparación estadística del rendimiento y productividad cross-browser HTML -DOM entre los frameworks Moodtools, JQuery y YUI determinará el mejor
framework para el desarrollo de aplicaciones web.</span>
    </p>
    <br />
    <br />
    <h3>1.4.1 Determinación de variables</h3>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Los indicadores que se usarán en el presente trabajo de investigación son los frameworks Moodtools, JQuery y YUI para el desarrollo de aplicaciones web.</span><
    </p>
    <br />
    <br />
    <h3>1.4.2 Operacionalización conceptual</h3>
    <br />
    <br />
    <p>
        <span style='font-family: "Arial","sans-serif"'>En la Tabla I.I el tipo y descripción de la variable utilizada en la hipótesis.</span>
    </p>
    <br />
    <br />

    <table border="1" style='border-collapse: collapse; border: none'>
        <tr>
            <td style='border-top: 1.0pt solid #78C0D4; border-left: 1.0pt solid #78C0D4; padding: 0cm 5.4pt 0cm 5.4pt' class="auto-style4">
                <p style='text-align: center'>
                    <b><span style='font-family: "Arial","sans-serif"; color: black'>VARIABLE</span></b>
                </p>
            </td>
            <td style="border-top: solid #78C0D4 1.0pt; border-bottom: solid #92CDDC 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; border-left-style: none; border-left-color: inherit; border-left-width: medium;" class="auto-style5">
                <p style='text-align: center'>
                    <b><span style="font-family: Arial,sans-serif; color: black">TIPO</span></b>
                </p>
            </td>
            <td style='border-top: solid #78C0D4 1.0pt; border-bottom: solid #92CDDC 1.0pt; border-right: solid #78C0D4 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; border-left-style: none; border-left-color: inherit; border-left-width: medium;' class="auto-style6">
                <p style='text-align: center'>
                    <b><span style='font-family: "Arial","sans-serif"; color: black'>DESCRIPCIÓN</span></b>
                </p>
            </td>
        </tr>
        <tr>
            <td style='width: 168.45pt; border-top: none; border-left: solid #78C0D4 1.0pt; border-bottom: solid #78C0D4 1.0pt; border-right: solid #92CDDC 1.0pt; background: #D2EAF1; padding: 0cm 5.4pt 0cm 5.4pt'>
                <p style='text-align: justify'>
                    <br />
                    <span style='font-family: "Arial","sans-serif"'>Frameworks Moodtools, JQuery y YUI para el desarrollo de aplicaciones web.</span>
                </p>
                <br />
            </td>
            <td style='width: 99.2pt; border-top: none; border-left: none; border-bottom: solid #78C0D4 1.0pt; border-right: solid #92CDDC 1.0pt; background: #D2EAF1; padding: 0cm 5.4pt 0cm 5.4pt'>
                <p style='text-align: center;'>
                    <span style='font-family: "Arial","sans-serif"'>Independiente</span>
                </p>
                <br />
            </td>
            <td style='width: 164.55pt; border-top: none; border-left: none; border-bottom: solid #78C0D4 1.0pt; border-right: solid #78C0D4 1.0pt; background: #D2EAF1; padding: 0cm 5.4pt 0cm 5.4pt'>
                <p>
                    <span style='font-family: "Arial","sans-serif"'>Alternativas para el desarrollo de aplicaciones web CROSS-BROWSER HTML DOM.</span>
                </p>
                <br />
            </td>
        </tr>
    </table>
    <br />
    <br />
    <br />
    <h3>1.4.3 Operacionalización metodológica</h3>
    <br />
    <br />
    <p>
        <span style='font-family: "Arial","sans-serif"'>En la Tabla I. II se detalla los indicadores, técnicas e instrumentos que se utilizarán en el estudio de las variables.</span>
    </p>
    <br />
    <br />

    <table border="1" class="auto-style1">
        <tr>
            <td style="width: 76.3pt; border-top: #78C0D4; border-left: #78C0D4; border-bottom: #92CDDC; border-right: #92CDDC; border-style: solid; border-width: 1.0pt; background: #4BACC6; padding: 0cm 5.4pt 0cm 5.4pt">
                <p class="MsoNormal">
                    <span style="font-family: Arial; color: white">VARIABLE</span>
                </p>
            </td>
            <td style="width: 76.3pt; border-top: #78C0D4; border-left: #78C0D4; border-bottom: #92CDDC; border-right: #92CDDC; border-style: solid; border-width: 1.0pt; background: #4BACC6; padding: 0cm 5.4pt 0cm 5.4pt">
                <p class="MsoNormal">
                    <span style="font-family: Arial; color: white">INDICADOR</span>
                </p>
            </td>
            <td style="width: 76.3pt; border-top: #78C0D4; border-left: #78C0D4; border-bottom: #92CDDC; border-right: #92CDDC; border-style: solid; border-width: 1.0pt; background: #4BACC6; padding: 0cm 5.4pt 0cm 5.4pt">
                <p class="MsoNormal">
                    <span style="font-family: Arial; color: white">TÉCNICA</span>
                </p>
            </td>
            <td style="width: 111.65pt; border-top: solid #78C0D4 1.0pt; border-left: none; border-bottom: solid #92CDDC 1.0pt; border-right: solid #78C0D4 1.0pt; background: #4BACC6; padding: 0cm 5.4pt 0cm 5.4pt">
                <p class="MsoNormal">
                    <span style="font-family: Arial; color: white">INSTRUMENTOS </span>
                </p>
            </td>
        </tr>
        <tr>
            <td style="width: 76.3pt; border-top: none; border-left: solid #78C0D4 1.0pt; border-bottom: solid #78C0D4 1.0pt; border-right: solid #92CDDC 1.0pt; background: #D2EAF1; padding: 0cm 5.4pt 0cm 5.4pt">
                <p class="MsoNormal">
                    <span style="font-family: Arial;">Frameworks Moodtools, JQuery y YUI para el desarrollo de aplicaciones web.</span>
                </p>
            </td>
            <td style="width: 163.0pt; border-top: none; border-left: none; border-bottom: solid #78C0D4 1.0pt; border-right: solid #92CDDC 1.0pt; background: #D2EAF1; padding: 0cm 5.4pt 0cm 5.4pt">
                <p class="auto-style2" style="">
                    <span style="font-family: Symbol;"><span style="">·<span style="font: 7.0pt"></span></span></span><span style="font-family: Arial">Tiempo de respuesta de los métodos del framework. </span>
                </p>
                <p class="auto-style2">
                    <span style="font-family: Symbol;"><span style="">·<span style="font: 7.0pt;"></span></span></span><span style="font-family: Arial">Uso de memoria. </span>
                </p>
                <p class="auto-style2">
                    <span style="font-family: Symbol;"><span style="">·<span style="font: 7.0pt;">  </span></span></span><span style="font-family: Arial">Uso de procesador. </span>
                </p>
                <p class="auto-style2" style="">
                    <span style="font-family: Symbol;"><span style="">·<span style="font: 7.0pt;">  </span></span></span><span style="font-family: Arial">Líneas de código </span>
                </p>
                <p class="auto-style2" style="">
                    <span style="font-family: Symbol;"><span style="">·<span style="font: 7.0pt"></span></span></span> <span style="font-family: Arial">Índice de mantenimiento. </span>
                </p>
                <p class="auto-style3" style="">
                    <span style="font-family: Symbol;"><span style="">·<span style="font: 7.0pt;">  </span></span></span><span style="font-family: Arial">Acoplamiento de clases. </span>
                </p>
            </td>
            <td style="width: 3.0cm; border-top: none; border-left: none; border-bottom: solid #78C0D4 1.0pt; border-right: solid #92CDDC 1.0pt; background: #D2EAF1; padding: 0cm 5.4pt 0cm 5.4pt">
                <p class="MsoNormal">
                    <span style="font-family: Arial">Análisis de código estático. </span>
                </p>
            </td>
            <td style="width: 111.65pt; border-top: none; border-left: none; border-bottom: solid #78C0D4 1.0pt; border-right: solid #78C0D4 1.0pt; background: #D2EAF1; padding: 0cm 5.4pt 0cm 5.4pt">
                <p class="auto-style3">
                    <span style="font-family: Symbol;"><span style="">·<span style="font: 7.0pt;">  </span></span></span><span style="font-family: Arial">Jsmeter.info</span>
                </p>
            </td>
        </tr>
    </table>

    <h2>CAPITULO II</h2>
    <br />
    <br />
    <h3>2.MARCO TEORICO</h3>
    <br />
    <br />
    <h3>Introducción a los Frameworks JavaScript</h3>
    <br />
    <p style='text-align: justify'>
        <span
            style='font-family: "Arial","sans-serif"'>Conforme fue creciendo
la Web y sus distintos usos se fueron complicando las páginas y las acciones
que se querían realizar a través de ellas. Al poco tiempo quedó patente que
HTML no era suficiente para realizar todas las acciones que se pueden llegar a
necesitar en una página web. En otras palabras, HTML se había quedado corto ya
que sólo sirve para presentar el texto en una página, definir su estilo y poco
más.</span><span style='font-family: "Arial","sans-serif"'> Entonces aparecieron poco a poco los 
Frameworks JavaScript que han sido diseñados para facilitar el desarrollo de software, permitiendo pasar
más tiempo identificando requerimientos de software que tratando con los
tediosos detalles de bajo nivel de proveer un sistema funcional, al igual que simplificar la manera
de interactuar con los documentos HTML, permitiendo manejar eventos,
desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas
web. </span>
    </p>

    <h3>Conceptualización</h3>
    <br />
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Un framework
es una estructura definida que facilita la organización y desarrollo de un
proyecto de software, un framework puede incluir bibliotecas, programas
desarrollados y lenguajes interpretados.</span>
    </p>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>También se
puede decir que un framework es un
esquema para el desarrollo y/o la implementación de una aplicación orientada
a objetos, con funciones, estructuras de datos complejas, etc. Además, pone a
disposición del programador elementos que forman la página web, para que éste
pueda acceder a ellos y modificarlos dinámicamente.</span>
    </p>

    <p style='text-align: justify'></p>

    <h3>Características</h3>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Los Frameworks de
JavaScript proveen funcionalidades genéricas las cuales facilitan la creación de aplicaciones de forma  rápida, modular y sencilla además reducen el tiempo y
esfuerzo de desarrollo.</span>
    </p>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Entre las características brindadas
por los Frameworks JavaScript tenemos:</span>
    </p>
    <br />
    <br />
    <p style='margin-left: 36.15pt; text-align: justify;'>
        <span
            style='font-family: "Times New Roman","serif"'><span>•<span
                style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></span></span><span style='font-family: "Arial","sans-serif"'><span></span></span><span
                style='font-family: "Arial","sans-serif";'>Permiten
simplificar la manera de interactuar con los documentos HTML</span><span
    style='font-family: "Arial","sans-serif"'></span>
    </p>

    <p style='margin-left: 36.15pt; text-align: justify;'>
        <span
            style='font-family: "Times New Roman","serif"'><span>•<span
                style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></span></span><span style='font-family: "Arial","sans-serif";'>Permiten manejar eventos</span><span
                style='font-family: "Arial","sans-serif"'></span>
    </p>

    <p style='margin-left: 36.15pt; text-align: justify;'>
        <span
            style='font-family: "Times New Roman","serif"'><span>•<span
                style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></span></span><span style='font-family: "Arial","sans-serif";'>Desarrollo de animaciones </span><span
                style='font-family: "Arial","sans-serif"'></span>
    </p>

    <p style='margin-left: 36.15pt; text-align: justify;'>
        <span
            style='font-family: "Times New Roman","serif"'><span>•<span
                style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></span></span><span style='font-family: "Arial","sans-serif";'>Agregan interacción con la tecnología AJAX a
páginas web. </span><span style='font-family: "Arial","sans-serif"'></span>
    </p>

    <p style='margin-left: 36.15pt; text-align: justify;'>
        <span
            style='font-family: "Times New Roman","serif"'><span>•<span
                style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></span></span><span lang="ES-MX" style='font-family: "Arial","sans-serif"; -MX'>Reducción de código y tiempo al usar AJAX.</span><span
                style='font-family: "Arial","sans-serif"'></span>
    </p>

    <p style='margin-left: 36.15pt; text-align: justify;'>
        <span
            style='font-family: "Times New Roman","serif"'><span>•<span
                style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></span></span><span lang="ES-MX" style='font-family: "Arial","sans-serif"; -MX'>Se ejecutan en el navegador
(browser-side).</span>
    </p>

    <p style='margin-left: 36.15pt; text-align: justify;'>
        <span
            style='font-family: "Times New Roman","serif"'><span>•<span
                style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></span></span><span lang="ES-MX" style='font-family: "Arial","sans-serif"; -MX'>Soporte en todos los navegadores
(Cross-browser).</span>
    </p>

    <p style='margin-left: 36.15pt; text-align: justify;'>
        <span
            style='font-family: "Times New Roman","serif"'><span>•<span
                style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></span></span><span lang="ES-MX" style='font-family: "Arial","sans-serif"; -MX'>Flexibles y potentes.</span><span
                style='font-family: "Arial","sans-serif"'></span>
    </p>

    <p style='text-align: justify'>
        <span
            style='font-family: "Arial","sans-serif"'>
            <o:p>&nbsp;</o:p>
        </span>
    </p>

    <h3>Ventajas del uso de
frameworks para el desarrollo de aplicaciones web</h3>

    <p>
        <span
            style='font-family: "Arial","sans-serif"'>
            <o:p>&nbsp;</o:p>
        </span>
    </p>

    <p class="first" style='margin-top: 0cm; text-align: justify'>
        <span
            lang="ES-AR" style='font-size: 11.0pt; font-family: "Arial","sans-serif";'>Las ventajas se mencionan a
continuación:</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Es un lenguaje sencillo
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style='font-family: "Arial","sans-serif";'>Es un lenguaje de programación muy liviano</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <span style='font-family: "Arial","sans-serif";'>Se recomienda para la creación de aplicaciones web</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <span style='font-family: "Arial","sans-serif";'>Utiliza poca memoria
                    
                 </span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <span style='font-family: "Arial","sans-serif";'>Útil para el desarrollo de páginas web dinámicas</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <span style='font-family: "Arial","sans-serif";'>Tiene gran cantidad de efectos visuales
                    
                 </span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <span style='font-family: "Arial","sans-serif";'>Fácil manejo de datos</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style='font-family: "Arial","sans-serif";'>Es soportado por los navegadores más populares</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <span style='font-family: "Arial","sans-serif";'>Ligero de carga</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <span style='font-family: "Arial","sans-serif";'>Fácil de integrar</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <span style='font-family: "Arial","sans-serif";'>Cientos de aplicaciones disponibles para uso</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style='font-family: "Arial","sans-serif";'>Puede agregar interactividad a elementos web</span>
    </p>

    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style='font-family: "Arial","sans-serif";'>Compatible con la gran mayoría de los navegadores modernos incluyendo
iPhone, móviles &amp; PS3</span>
    </p>

    <h3><span>Cross-browser</span></h3>

    <p style='text-align: justify; vertical-align: baseline'>
        <span
            style='font-size: 11.0pt; font-family: "Arial","sans-serif"'>A medida que los navegadores evolucionan, también las
especificaciones se mejoran, por lo que las distintas versiones del mismo
software de exploración web también pueden mostrar las páginas de manera
distinta entre si.</span>
    </p>

    <p style='text-align: justify; vertical-align: baseline'>
        <span
            style='font-size: 11.0pt; font-family: "Arial","sans-serif"'>Pues los programas con los que el público visualizará nuestros trabajos
pueden ser muy distintos y el aspecto de las webs puede cambiar bastante de
unos a otros. Lo mejor que podemos hacer es realizar páginas web que se vean
igual en todos los navegadores. Esas soluciones que se adaptan a todo tipo de
navegadores decimos que son Cross-Browser. Hay que decir que el cross-browser
se puede aplicar a muchas tecnologías, que son las que entienden los
navegadores y con las que trabajamos los desarrolladores. En conclusión Cross-browser se refiere a la
capacidad de un sitio web, aplicación web,HTML construct o client-side script para
funcionar en ambientes que proveen características requeridas cuando las
características están ausentes o inexistentes.</span>
    </p>

    <h2></h2>

    <p>
        <span
            style='font-family: "Arial","sans-serif"'>
            <o:p>&nbsp;</o:p>
        </span>
    </p>

    <p class="first" style='margin-top: 0cm; text-align: justify'>
        <span
            lang="ES-AR" style='font-size: 11.0pt; font-family: "Arial","sans-serif"; color: #0A0A0A; background: white'>HTML DOM define un estándar para acceder y
manipular documentos HTML. </span><span lang="ES-AR" style='font-size: 11.0pt; font-family: "Arial","sans-serif"; color: #0A0A0A'>Los objetos
del DOM modelizan tanto la ventana del navegador como el historial, el
documento o página web, y todos los elementos que pueda tener dentro la propia página,
como párrafos, divisiones, tablas, formularios y sus campos, etc. A través del
DOM se puede acceder, por medio de Javascript, a cualquiera de estos elementos,
es decir a sus correspondientes objetos para alterar sus propiedades o invocar
a sus métodos. Con todo, a través del DOM, queda disponible para los
programadores de Javascript, cualquier elemento de la página, para
modificarlos, suprimirlos, crear nuevos elementos y colocarlos en la página,
etc.</span>
    </p>

    <p class="first" style='text-align: center; margin-right: 0cm; margin-bottom: 5.0pt; margin-left: 35.4pt; page-break-after: avoid'>
        <span style='font-size: 11.0pt; font-family: "Arial","sans-serif"; color: #0A0A0A; text-align: center'>
            <img src="../Images/Arbol HTML DOM.png" />
        </span>
    </p>

    <p style='text-align: center'>
        <span style='font-family: "Arial","sans-serif";'>Figura 1. Árbol HTML DOM</span>
    </p>
    <br />
    <h2>Framework MooTools</h2>

    <h3>Conceptualización<span style='font-size: 12.0pt'></span></h3>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Conjunto de librerías, también llamado API, que proveen clases de programación orientada a
objetos en JavaScript, para realizar una amplia gama de funcionalidades en páginas web, como trabajo con capas, efectos diversos, Ajax y mucho más. Con el
framework MooTools podemos programar todo tipo de scripts en el cliente rápidamente de las distintas particularidades de cada navegador. MooTools está
especialmente indicado para programar scripts complejos, que nos costaría mucho más trabajo de realizar si partiésemos de cero. Framework JavaScript para construir aplicaciones web dinámicas y compatibles con
cualquier navegador</span>
    </p>
    <p style="text-align: justify">
        <span style='font-family: "Arial","sans-serif";'>El framework no pesa demasiado en Kb y no el procesamiento carga poco al navegador.</span>
    </p>
    <p style="text-align: justify">
        <span style='font-family: "Arial","sans-serif";'>MooTools se compone de diversos módulos y podemos seleccionar los que
vamos a utilizar para incorporarlos en nuestras páginas web, dejando los otros para que no ocupen tiempo de descarga ni procesamiento.</span>
    </p>
    <p style="text-align: justify">
        <span style='font-family: "Arial","sans-serif";'>Podemos confiar en el sistema porque las herramientas de Mootools funcionan perfectamente, sin emitir errores en tiempo de ejecución.</span>
    </p>
    <p style="text-align: justify">
        <span style='font-family: "Arial","sans-serif";'>Existen muchos desarrolladores que lo utilizan con éxito y han creado una serie de componentes adicionales ya listos para usar en nuestras páginas web,
como calendarios, editores de texto, etc.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> </span><span style='font-family: "Arial","sans-serif";'>Sigue los principios DRY, que hacen de él un Framework rico, potente y eficiente.</span>
    </p>
    <h2>Arquitectura</h2>
    <p>
        <span
            style='font-family: "Arial","sans-serif"'>La arquitectura del framework MooToolspermite extensiones fáciles y mejoras sin alterar el código de la biblioteca</span>
    </p>

    <h3>Ventajas de Mootools</h3>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>MooTools da un gran aporte o ventajas entre esas tenemos las siguientes:</span>
    </p>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Framework modular y extendible, el desarrollador puede elegir que
componentes usar y cuáles no.</span>
    </p>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Framework rico, potente y eficiente además es orientado a objetosy sigue los principios DRY</span>
    </p>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Componente avanzado de efectos,con transiciones,de función parabólica, optimizadas.</span>
    </p>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Framework desarrollado por programadores para programadores.</span>
    </p>
    <br />
    <br />
    <h2>Framework jQuery</h2>
    <br />
    <h3>Conceptualización</h3>
    <br />
    <p style="text-align: justify">
        <span style='font-family: "Arial","sans-serif"'>El jQuery es una librería de JavaScript de código abierto, su autor es John Resig. Posee un doble
licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2.</span>
    </p>
    <p style="text-align: justify">
        <span style='font-family: "Arial","sans-serif"'>jQuery simplifica el desarrollo de las aplicaciones web del lado del cliente, proporciona un fácil
acceso a los elementos DOM mediante el uso de la sintaxis de CSS.</span>
    </p>
    <p style="text-align: justify">
        <span style='font-family: "Arial","sans-serif"'>Provee un conjunto de
funciones para animar el contenido de la página en forma muy sencilla. Permite
realizar un desarrollo rápido y libre de errores.</span>
    </p>
    <p style='text-align: justify'>
        <span
            style='font-family: "Arial","sans-serif"'>jQuery consiste en un único fichero JavaScript que contiene las
funcionalidades comunes de DOM, eventos, efectos y AJAX.</span>
    </p>
    <br />
    <h3>Características</h3>
    <p>
        <span style='font-family: "Arial","sans-serif"'>jQuery cuenta principalmente con las siguientes características:</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Manejo avanzado de DOM, mediante interactividad y modificaciones del árbol DOM, incluye soporte para CSS 1-3 y un plugin básico de XPath.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Captura y manejo de eventos.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Efectos visuales dinámicos para animación de la página.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Agregar interacción con AJAX.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Widgets.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Manipulación de hojas de estilos CSS.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Soporta extensiones.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Posee varias utilidades para obtener información del
navegador, operar con objetos y vectores, funciones para rutinas comunes, etc.</span>
    </p>
    <h3>Ventajas de jQuery</h3>
    <p>
        <span style='font-family: "Arial","sans-serif";'>Las ventajas que ofrece el framework jQuery frente a los demás Frameworks existentes en el mercado son:</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Menor cantidad de líneas de código.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Permite trabajar separado del html proporcionando facilidad de mantenimiento y aumentando la productividad del proyecto.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Posee una sintaxis fácil y liviana.</span><span style='font-family: "Arial","sans-serif";'></span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Funciona independientemente del navegador reduciendo problemas para el desarrollador.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Permite el crecimiento del proyecto ya que existen muchos plugings ya desarrollados que
pueden adaptarse al tipo de proyecto en desarrollo.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Proporciona resultados con poco esfuerzo ya que es de fácil aprendizaje.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Existe gran cantidad de soporte como documentación y recursos para el desarrollador.</span>
    </p>
    <h2>Framework YUI</h2>

    <h3><span><span>Conceptualización</span></span></h3>

    <p style='text-align: justify'>
        <span
            style='font-family: "Arial","sans-serif"; background: white'>Es un
código abierto de la biblioteca de JavaScript para la construcción interactiva de aplicaciones web utilizando técnicas tales como Ajax DHTML DOM scripting además YUI incluye varias
clases centrales de  recursos CSS y está disponible bajo una licencia BSD.</span>
    </p>
    <h3>Características</h3>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Las utilidades en YUI ayudan de gran manera a simplificar
el desarrollo para la compatibilidad entre Navegadores basados en técnicas DOM, DHTML y AJAX.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Los controles de YUI proporcionan elementos visuales altamente interactivos del diseño para sus aplicaciones Web. </span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Los controles de YUI son elementos que se crean y se manejan íntegramente del lado del cliente (usuario) y nunca requieren de una recarga de página.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>El código CSS en YUI permite maquetar páginas con distintas anchuras (750px, 950px, y 974px).</span>
    </p>
    <h3>Arquitectura</h3>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>El Framework tiene su propia estructura, y aplica diferentes estrategias y modelos de Arquitectura en YUI
es tan modular que permite enlazar únicamente los archivos que necesitan cada página y no todos los archivos de la librería, lo que mejora el rendimiento de
la aplicación.</span>
    </p>
    <p style='text-align: center'>
        <span
            style='font-family: "Arial","sans-serif"; align-content: center'>
            <img border="0" width="601" height="354" src="../Images/Arquitectura YUI.png" alt="ARCHITECTURE YUI" />
        </span>
    </p>
    <br />
    <br />
    <p style='text-align: center'>
        <span style='font-family: "Arial","sans-serif"'>Arquitectura Framework Yui</span>
    </p>
    <br />
    <h1 style='text-align: center'>CAPITULO III</h1>
    <br />
    <h2 style='text-align: center'>3. ANÁLISIS DE RENDIMIENTO Y
PRODUCTIVIDAD CROSS-BROWER HTML DOM DE LOS FRAMEWORKS MOOTOOLS, JQUERY Y YUI</h2>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>A continuación se presentara
un conjunto de modelos y técnicas aplicadas para la medición de los parámetros
rendimiento y productividad de los Frameworks de JavaScript Mootools, JQuery y
YUI.</span>
    </p>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>El objetivo principal de este estudio es proporcionar un marco referencial de compatibilidad cross-browser
basado en los parámetros descritos en el estudio. La conclusión presentará el framework de mayor adaptación y características para la programación cross-browser.</span>
    </p>
    <br />
    <h2>3.1 Determinación de los parámetros para la comparación de rendimiento y productividad</h2>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>En esta sección se definen los parámetros y variables sujetas a medición para la confirmación o negación de la hipótesis planteada en el presente estudio.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Los parámetros y variables serán evaluados sobre las funciones HTML-DOM de los frameworks JQuery, Moodtools, YUI.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Los parámetros y variables seleccionados son:</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Rendimiento</span>
    </p>
    <p style='margin-left: 72.0pt; text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Tiempo de respuesta de los métodos del Frameworks.</span>
    </p>
    <p style='margin-left: 72.0pt; text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Uso de memoria.</span>
    </p>
    <p style='margin-left: 72.0pt; text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Uso de Procesador.</span>
    </p>
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Productividad</span>
    </p>
    <p style='margin-left: 72.0pt; text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Líneas de código.</span>
    </p>
    <p style='margin-left: 72.0pt; text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Índice de mantenimiento.</span>
    </p>
    <p style='margin-left: 72.0pt; text-align: justify'>
        <span style='font-family: "Arial","sans-serif";'>Acoplamiento de clases.</span>
    </p>

    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>El porcentaje de cumplimiento de cada parámetro corresponde la relación existente con su valor máximo y el cien por ciento, la fórmula de cálculo es:          
        </span>
    </p>
    <br />
    <h2>Descripción del Ambiente de Evaluación</h2>
    <br />
    <h2>Equipo Utilizado</h2>
    <br />
    <p style='text-align: justify'>
        <span style='font-family: "Arial","sans-serif"'>Para el desarrollo de la siguiente tesis se utilizó un único equipo con el objetivo de
reducir el margen de error en el procedimiento muestral. El detalle del equipo se presenta en la Tabla</span>
    </p>
    <p style='text-align: center'>
        <span>Tabla Descripción del hardware utilizado</span>
    </p>
    <div>

        <table class="MsoTableLightListAccent5" border="1" style='border-collapse: collapse; border: none'>
            <tr>
                <td style='width: 128.0pt; border-top: solid #4BACC6 1.0pt; border-left: solid #4BACC6 1.0pt; border-bottom: none; border-right: none; background: #4BACC6; padding: 0cm 5.4pt 0cm 5.4pt; height: 16.65pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal'>
                        <b><span
                            style='font-family: "Arial","sans-serif"; color: white;'>Característica</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border-top: solid #4BACC6 1.0pt; border-left: none; border-bottom: none; border-right: solid #4BACC6 1.0pt; background: #4BACC6; padding: 0cm 5.4pt 0cm 5.4pt; height: 16.65pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal'>
                        <b><span
                            style='font-family: "Arial","sans-serif"; color: white;'>Descripción</span></b>
                    </p>
                </td>
            </tr>
            <tr>
                <td style='width: 128.0pt; border: solid #4BACC6 1.0pt; border-right: none; padding: 0cm 5.4pt 0cm 5.4pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <b><span
                            style='font-family: "Arial","sans-serif"'>Procesador</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border: solid #4BACC6 1.0pt; border-left: none; padding: 0cm 5.4pt 0cm 5.4pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <span
                            style='font-family: "Arial","sans-serif"; color: black;'>Procesador Intel Core i5 2410-M 2.3GHz</span>
                    </p>
                </td>
            </tr>
            <tr style='height: 25.55pt'>
                <td style='width: 128.0pt; border: none; border-left: solid #4BACC6 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 25.55pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <b><span
                            style='font-family: "Arial","sans-serif"'>Memoria RAM</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border: none; border-right: solid #4BACC6 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 25.55pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal'>
                        <span style='font-family: "Arial","sans-serif"'>4 GB DDR3</span>
                    </p>
                </td>
            </tr>
            <tr>
                <td style='width: 128.0pt; border: solid #4BACC6 1.0pt; border-right: none; padding: 0cm 5.4pt 0cm 5.4pt; height: 21.95pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <b><span
                            style='font-family: "Arial","sans-serif"'>Disco Duro</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border: solid #4BACC6 1.0pt; border-left: none; padding: 0cm 5.4pt 0cm 5.4pt; height: 21.95pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <span
                            style='font-family: "Arial","sans-serif"'>320 GB</span>
                    </p>
                </td>
            </tr>
        </table>

    </div>

    <p style='text-align: center'>
        <b><span
            style='font-size: 9.0pt; color: #4F81BD;'>Fuente: Elaborada por los autores</span></b>
    </p>
    <h2>Software Utilizado</h2>
    <p style='text-align: justify'>
        <span
            style='font-family: "Arial","sans-serif"'>El software utilizado
para la ejecución de las pruebas se detalla en la Tabla</span>
    </p>
    <p style='text-align: center'>
        <span><span>Tabla Descripción del software utilizado</span></span>
    </p>
    <div>

        <table class="MsoTableLightListAccent5" border="1" style='border-collapse: collapse; border: none'>
            <tr>
                <td style='width: 128.0pt; border-top: solid #4BACC6 1.0pt; border-left: solid #4BACC6 1.0pt; border-bottom: none; border-right: none; background: #4BACC6; padding: 0cm 5.4pt 0cm 5.4pt; height: 16.65pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal'>
                        <b><span
                            style='font-family: "Arial","sans-serif"; color: white;'>Característica</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border-top: solid #4BACC6 1.0pt; border-left: none; border-bottom: none; border-right: solid #4BACC6 1.0pt; background: #4BACC6; padding: 0cm 5.4pt 0cm 5.4pt; height: 16.65pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal'>
                        <b><span
                            style='font-family: "Arial","sans-serif"; color: white;'>Descripción</span></b>
                    </p>
                </td>
            </tr>
            <tr>
                <td style='width: 128.0pt; border: solid #4BACC6 1.0pt; border-right: none; padding: 0cm 5.4pt 0cm 5.4pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <b><span
                            style='font-family: "Arial","sans-serif"'>Sistema Operativo</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border: solid #4BACC6 1.0pt; border-left: none; padding: 0cm 5.4pt 0cm 5.4pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <span
                            style='font-family: "Arial","sans-serif"; color: black;'>Windows 8 Enterprise</span>
                    </p>
                </td>
            </tr>
            <tr>
                <td style='width: 128.0pt; border: none; border-left: solid #4BACC6 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 25.55pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <b><span
                            style='font-family: "Arial","sans-serif"'>IDE</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border: none; border-right: solid #4BACC6 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 25.55pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal'>
                        <span style='font-family: "Arial","sans-serif"'>Microsoft Visual Studio 2012 Ultimate</span>
                    </p>
                </td>
            </tr>
            <tr>
                <td style='width: 128.0pt; border: solid #4BACC6 1.0pt; border-right: none; padding: 0cm 5.4pt 0cm 5.4pt; height: 21.95pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <b><span
                            style='font-family: "Arial","sans-serif"'>Hosting Web</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border: solid #4BACC6 1.0pt; border-left: none; padding: 0cm 5.4pt 0cm 5.4pt; height: 21.95pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <span
                            style='font-family: "Arial","sans-serif"'>Internet Information Services 7.0</span>
                    </p>
                </td>
            </tr>
            <tr>
                <td style='width: 128.0pt; border-top: none; border-left: solid #4BACC6 1.0pt; border-bottom: solid #4BACC6 1.0pt; border-right: none; padding: 0cm 5.4pt 0cm 5.4pt; height: 21.95pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal;'>
                        <b><span
                            style='font-family: "Arial","sans-serif"'>Navegadores</span></b>
                    </p>
                </td>
                <td style='width: 205.1pt; border-top: none; border-left: none; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4BACC6 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 21.95pt'>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: normal'>
                        <span style='font-family: "Arial","sans-serif";'>
                            <o:p>&nbsp;</o:p>
                        </span>
                    </p>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: 150%'>
                        <span style='line-height: 150%; font-family: "Arial","sans-serif";'>Internet
  Explorer 9.0, 10.0</span>
                    </p>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: 150%'>
                        <span style='line-height: 150%; font-family: "Arial","sans-serif";'>Mozilla
  Firefox 22.0</span>
                    </p>
                    <p style='margin-bottom: 0cm; margin-bottom: .0001pt; text-align: center; line-height: 150%'>
                        <span style='line-height: 150%; font-family: "Arial","sans-serif";'>Google Chrome
  27</span>
                    </p>
                </td>
            </tr>
        </table>

    </div>

    <p style='text-align: center'>
        <b><span
            style='font-size: 9.0pt; color: #4F81BD;'>Fuente: Elaborada por los autores</span></b>
    </p>
    <br />
    <br />
    <br />
    <br />
    <h1>CAPITULO IV</h1>
    <p style='text-align: justify'>
        <span
            style='font-family: "Arial","sans-serif"'>En el presente capítulo, una vez realizada la selección del mejor framework de JavaScript en el Capítulo
III, se procede con el desarrollo de la aplicación web para la Unidad Educativa Santo Tomás Apóstol Riobamba” (UESTAR), se utilizará la metodología
Xtreme Programming (XP), de esta forma se vincula la parte teorica de la investigación con la aplicación práctica.  
        </span>
    </p>
    <br />
    <br />

    <h2>BIBLIOGRAFÍA DE INTERNET</h2>

    <p style='font-family: "Arial","sans-serif"'>
        1.FRAMEWORK MOOTOOLS
    </p>

    <p style='font-family: "Arial","sans-serif"'>
        <a href="http://www.lawebera.es/mootools/manipulacion-de-elementos-del-dom-con-mootools.php">http://www.lawebera.es/mootools/manipulacion-de-elementos-del-dom-con-mootools.php</a>
    </p>

    <p style='font-family: "Arial","sans-serif"'>2006 - 2013 </p>

    <p style='font-family: "Arial","sans-serif"'><a href="http://es.scribd.com/doc/42117532/Manual-Mootools">http://es.scribd.com/doc/42117532/Manual-Mootools</a></p>

    <p style='font-family: "Arial","sans-serif"'>2013 </p>

    <p style='font-family: "Arial","sans-serif"'><a href="http://es.wikipedia.org/wiki/Mootools">http://es.wikipedia.org/wiki/Mootools </a></p>

    <p style='font-family: "Arial","sans-serif"'>2013-03-13</p>

    <p style='font-family: "Arial","sans-serif"'>2.FRAMEWORK jQUERY</p>

    <p style='font-family: "Arial","sans-serif"'><a href="http://es.wikipedia.org/wiki/JQuery">http://es.wikipedia.org/wiki/JQuery</a></p>

    <p style='font-family: "Arial","sans-serif"'>2013-03-13</p>

    <p style='font-family: "Arial","sans-serif"'>
        <a href="http://www.desarrolloweb.com/manuales/manual-jquery.html">http://www.desarrolloweb.com/manuales/manual-jquery.html</a>
    </p>

    <p style='font-family: "Arial","sans-serif"'>2012-09-19</p>

    <p style='font-family: "Arial","sans-serif"'>
        <a href="http://www.dicreato.com/blog/jquery-la-libreria-javascript-por-excelencia-un-framework-javascript-lleno-de-ventajas/">http://www.dicreato.com/blog/jquery-la-libreria-javascript-por-excelencia-un-framework-javascript-lleno-de-ventajas/</a>
    </p>

    <p style='font-family: "Arial","sans-serif"'>
        2011-06-21
    </p>

    <p style='font-family: "Arial","sans-serif"'>
        <a href="http://www.librosweb.es/ajax/capitulo_10/la_libreria_jquery.html">http://www.librosweb.es/ajax/capitulo_10/la_libreria_jquery.html</a>
    </p>

    <p style='font-family: "Arial","sans-serif"'>2013-01-15</p>

    <p style='font-family: "Arial","sans-serif"'>3. FRAMEWORK YUI</p>

    <p style='font-family: "Arial","sans-serif"'>
        <a href="http://www.yukei.net/2007/10/yui-y-otros-frameworks-css/">http://www.yukei.net/2007/10/yui-y-otros-frameworks-css/</a>
    </p>

    <p style='font-family: "Arial","sans-serif"'>2012-10-03</p>

    <p style='font-family: "Arial","sans-serif"'>
        <a href="http://es.wikipedia.org/wiki/Yahoo!_UI_Library">http://es.wikipedia.org/wiki/Yahoo!_UI_Library</a>
    </p>

    <p style='font-family: "Arial","sans-serif"'>2013-03-11 </p>

    <p style='font-family: "Arial","sans-serif"'>
        <a href="http://librosweb.es/css_avanzado/capitulo_5/primeros_pasos_con_el_framework_yui.html">http://librosweb.es/css_avanzado/capitulo_5/primeros_pasos_con_el_framework_yui.html</a>
    </p>

    <p style='font-family: "Arial","sans-serif"'>2013</p>

    <p style='font-family: "Arial","sans-serif"'>
        <a href="http://docs.huihoo.com/yui/yui3-architecture.pdf">http://docs.huihoo.com/yui/yui3-architecture.pdf</a>
    </p>

    <h1 style='text-align: center'>ANEXOS</h1>

    <h2>Anexo 1. Cálculos para determinar el tamaño de la muestra para las pruebas</h2>

    <p style='font-family: "Arial","sans-serif"'>
        Para determinar el tamaño
       de la muestra para las pruebas de tiempos de respuesta y uso de recursos se
       utilizó la siguiente fórmula estadística cuando no se conoce la población
    </p>
    <p style='font-family: "Arial","sans-serif"'>Dónde: </p>

    <p style='font-family: "Arial","sans-serif"'>
        Tamaño de la muestra. 
       Es el nivel de confianza elegido, determinado por el valor de &#945;. Para una confianza del 95% (&#945;= 0,05), este valor es de 1,96 según la tabla:
    </p>

    <div style="text-align: center">

        <table border="1" style='border-collapse: collapse; border: none' align="center">
            <tr>
                <td style='width: 41.4pt; border-top: solid #4BACC6 1.0pt; border-left: none; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4F81BD 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'></td>
                <td style='width: 41.4pt; border-top: solid #4BACC6 1.0pt; border-left: none; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4F81BD 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                        0.10
                    </p>
                </td>
                <td style='width: 41.4pt; border-top: solid #4BACC6 1.0pt; border-left: none; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4F81BD 1.0pt; background: #DBE5F1; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                        <b>0.05</b>
                    </p>
                </td>
                <td style='width: 41.4pt; border-top: solid #4BACC6 1.0pt; border-left: none; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4F81BD 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                        0.01
                    </p>
                </td>
                <td style='width: 41.4pt; border: solid #4BACC6 1.0pt; border-left: none; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                        0.001
                    </p>
                </td>
            </tr>
            <tr>
                <td style='width: 47.45pt; border-top: none; border-left: solid #4BACC6 1.0pt; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4F81BD 1.0pt; background: #D3DFEE; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                    </p>
                </td>
                <td style='width: 41.4pt; border-top: none; border-left: none; border-bottom: solid #4F81BD 1.0pt; border-right: solid #4F81BD 1.0pt; background: #D3DFEE; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                        1.645
                    </p>
                </td>
                <td style='width: 41.4pt; border-top: none; border-left: none; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4F81BD 1.0pt; background: #DBE5F1; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                        <b>1.960</b>
                    </p>
                </td>
                <td style='width: 41.4pt; border-top: none; border-left: none; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4F81BD 1.0pt; background: #D3DFEE; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                        2.576
                    </p>
                </td>
                <td style='width: 41.4pt; border-top: none; border-left: none; border-bottom: solid #4BACC6 1.0pt; border-right: solid #4BACC6 1.0pt; background: #D3DFEE; padding: 0cm 5.4pt 0cm 5.4pt; height: 19.5pt'>
                    <p style='font-family: "Arial","sans-serif"'>
                        3.291
                    </p>
                </td>
            </tr>
        </table>

    </div>

    <p align="center" style='font-family: "Arial","sans-serif"'>Tabla 3 Valores de Z más usados según el valor de </p>

    <p style='font-family: "Arial","sans-serif"'>
        Proporción esperada, para el caso del estudio se considera una proporción del 50% para reducir el factor de error (0.5).
    </p>

    <p style='font-family: "Arial","sans-serif"'>
        Proporcion 1-p
    </p>

    <p style='font-family: "Arial","sans-serif"'>
        Margen de error considerado para la prueba, considerado el 5%.
    </p>

    <p style='font-family: "Arial","sans-serif"'>
        Aproximando al inmediato superior la muestra es de 385.
    </p>
</body>
</html>

